<!--
 * @Description:修改密码
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-13 14:37:17
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-07 15:01:50
-->
<!--  -->
<template>
    <div class="pwd">
        <div class="pwd_top">
            <h1 @click="$router.push('/home')" class="cursor">{{ setting.title }}</h1>
            <span>修改密码</span>
        </div>

        <div class="setPWD">
            <div class="user_info">修改密码</div>

            <div class="setform">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="手机号验证" name="first">
                        <!-- <div class="back">
                            <i class="el-icon-back">返回</i>
                        </div> -->
                        <div>
                            <el-steps :active="active" finish-status="success" simple>
                                <el-step title="输入注册手机号"> </el-step>
                                <el-step title="重新设置密码"> </el-step>
                                <el-step title="完成"></el-step>
                            </el-steps>
                            <el-form
                                v-if="active === 1"
                                ref="verifyForm"
                                :model="ruleForm"
                                status-icon
                                :rules="rules"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <el-form-item label="账号：" prop="userName">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.userName" placeholder="请输入账号"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="手机号：" prop="phone">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="验证码：" prop="code">
                                    <el-col :span="7">
                                        <el-input v-model="ruleForm.code" placeholder="验证码"></el-input>
                                    </el-col>
                                    <el-col :span="4" style="padding-left: 20px">
                                        <el-button class="codeButtonName" :disabled="disabled" @click="validateFieldCode">{{
                                            codeButtonName
                                        }}</el-button>
                                    </el-col>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="steps('2', 'verifyForm')">下一步</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>

                            <el-form
                                v-if="active === 2"
                                ref="pwdForm"
                                :model="ruleForm"
                                status-icon
                                :rules="rules"
                                label-width="120px"
                                class="demo-ruleForm"
                            >
                                <el-form-item label="新密码：" prop="checkPass">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" placeholder="请输入新密码" />
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="确认密码：" prop="newPassTwo">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.newPassTwo" type="password" autocomplete="off" placeholder="请再次输入新密码" />
                                    </el-col>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="steps('3', 'pwdForm')">提交</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>

                            <el-form
                                v-if="active === 3"
                                ref="ruleForm"
                                :model="ruleForm"
                                status-icon
                                :rules="rules"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <el-form-item label="" prop="pass" class="form-item-success">
                                    <el-result icon="success" title="恭喜您,密码修改成功" subTitle="">
                                        <template slot="extra">
                                            <h2 class="cursor" type="primary" size="medium" @click="$router.push('/home')" style="margin: 0">
                                                返回首页
                                            </h2>
                                        </template>
                                    </el-result>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import titles from "@/components/title"
import setting from "@/settings"
export default {
    name: "",

    components: { titles },
    data() {
        return {
            ruleForm: {
                pass: "",
                checkPass: "",
                age: "",
                token: "",
                userName: "",
            },
            rules: {
                pass: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
                checkPass: [
                    { required: true, message: "请输入新密码", trigger: "blur" },
                    {
                        pattern: /^.{8,28}$/,
                        message: "密码长度为8之28个字符",
                        trigger: "blur",
                    },
                ],
                newPassTwo: [{ required: true, message: "请再次输入新密码", trigger: "blur" }],
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    { min: 11, max: 11, message: "请输入正确手机号", trigger: "blur" },
                ],
                code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
                Email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
                userName: [{ required: true, message: "请输入账号名", trigger: "blur" }],
            },
            setting: setting,
            codeButtonName: "获取验证码",
            disabled: false,
            active: 1,
            activeName: "first",
        }
    },

    computed: {},

    mounted() {
        this.$store.state.map.mapList = []
        this.initUserName()
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!")
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        getCode() {
            if (this.codeButtonName == "获取验证码") {
                let second = 60
                let name = second + "秒后重新获取"
                this.codeButtonName = name
                this.disabled = true
                second--
                let timestamp = setInterval(() => {
                    if (second <= 0) {
                        clearInterval(timestamp)
                        this.codeButtonName = "获取验证码"
                        this.disabled = false
                    } else {
                        let name = second + "秒后重新获取"
                        second--
                        this.codeButtonName = name
                    }
                }, 1000)
            }
        },
        //验证码
        validateFieldCode() {
            this.$refs.verifyForm.validateField("phone", (verifycode_check) => {
                if (verifycode_check) return
                this.getCode()
                this.$store.dispatch("user/ForgotPassword", { phone: this.ruleForm.phone, userName: this.ruleForm.userName }).then((res) => {
                    // if (res.code == 200) this.$message.success(res.msg || "发送成功")
                    // if (res.code != 200) this.$message.error(res.msg || "发送失败")
                })
                // this.$refs.ruleForm.validateField("code", (user_mobile_check) => {
                //     if (user_mobile_check) return
                // })
            })
        },
        steps(index, formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (formName == "verifyForm") {
                        var obj = {
                            phone: this.ruleForm.phone,
                            code: this.ruleForm.code,
                            userName: this.ruleForm.userName,
                        }
                        const { code, data } = await this.$store.dispatch("user/verifyCode", obj)
                        if (code === 200) {
                            this.active = index * 1
                            this.resetForm.token = data
                        }
                    }
                    if (formName == "pwdForm") {
                        var data = {
                            phone: this.ruleForm.phone,
                            code: this.resetForm.code,
                            password: this.ruleForm.checkPass,
                            userName: this.ruleForm.userName,
                        }
                        const { code } = await this.$store.dispatch("user/updatePassword", { data: data, token: this.resetForm.token })
                        if (code === 200) this.active = index * 1
                        if (code === 200) this.$store.dispatch("user/logout")
                    }
                } else {
                    return false
                }
            })
        },
        handleClick() {
            this.active = 1
            this.ruleForm = {}
            this.$refs.verifyForm && this.$refs.verifyForm.resetFields()
            this.$refs.pwdForm && this.$refs.pwdForm.resetFields()
            this.$refs.EmailForm && this.$refs.EmailForm.resetFields()
            this.$refs.EmailFormPWD && this.$refs.EmailFormPWD.resetFields()
        },
        initUserName() {
            const userinfo = this.$store.getters["user/GET_USERINFO"]

            if (userinfo) this.ruleForm.userName = userinfo.userName || ""
        },
    },
}
</script>
<style lang='scss' scoped>
.pwd {
    background: white;
    height: 100%;

    .pwd_top {
        padding: var(--main-padding);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #0076a8;

        span {
            text-decoration: none;
            color: #0076a8;
            font-size: 0.37rem;
            font-family: "微软雅黑";
            padding: 0 30px;
        }
    }

    .user_info {
        border-left: 0.083333rem solid #1eb08b;
        font-size: 0.37rem;
        border-bottom: 1px solid#ccc;
        padding: 10px;
    }
}

.setform {
    width: 1000px;
    margin: 0px auto;
    padding: 20px;

    .el-form {
        margin: 0px auto;
        padding: 40px 20px;
        width: 100%;

        .el-input {
            width: 100%;
        }

        .form-item-success {
            ::v-deep .el-form-item__content {
                margin-left: 0 !important;
            }

            h2:hover {
                color: #409eff;
            }
        }
    }
}

.setPWD {
    margin: 20px 0;
    padding: var(--main-padding);
}

.back {
    font-size: 20px;
    padding: 10px;
}
</style>
